<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid网格布局</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      display: grid;
    }

    .wrapper {
      background-color: pink;
      width: 100%;
      height: 100%;
      color: #fff;
      display: grid;
      /* 声明列的宽度 */
      grid-template-columns: repeat(3, 1fr);
      /* 声明行的高度 */
      /* grid-template-rows: repeat(4, 1fr); */
      grid-auto-rows: minmax(100px, auto);
      /* 声明行间距和列间距  */
      /* 行间距 grid-row-gap */
      /* 列间距 grid-column-gap */
      gap: 10px;
      /* 定义区域 */
      grid-template-areas:
        'a b b'
        'c b b'
        'c d e'
        'c d f';
      /* 填充顺序，先行后列 */
      /* grid-auto-flow: row; */

      /* 整个内容区域在容器里面的水平位置 start | end | center | stretch | space-around | space-between | space-evenly */
      /* justify-content: space-evenly; */
      /* 整个内容区域的垂直位置（上中下） start | end | center | stretch | space-around | space-between | space-evenly*/
      /* align-content: center; */

      /* 单元格内容水平（左中右 start center end stretch） */
      /* justify-items: center; */
      /* 单元格内容垂直 */
      /* align-items: center; */

    }

    .item1 {
      background: #19CAAD;
    }

    .item2 {
      background: #8CC7B5;
      /* 
        grid-column: <start-line> / <end-line>;
        grid-row: <start-line> / <end-line>; 
      */

      /* grid-row: 1 / 3;
      grid-column: 2 / 4; */

      /* 等同于 */
      /* grid-row: 1 / span 2;
      grid-column: 2 / span 2; */

      /* 还等同于 */
      /* grid-area: b; */

      /* 还等同于 */
      /* grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
      grid-area: 1 / 2 / 3 / 4;

    }

    .item3 {
      background: #D1BA74;
      /* grid-row: 2 / 5; */

      /* 等同于 */
      /* grid-row: 2 / span 3; */

      /* 等同于 */
      /* grid-area: c; */

      /* 等同于 */
      grid-area: 2 / 1 / 5 / 2;
    }

    .item4 {
      background: #BEE7E9;

      /* grid-row: 3 / 5;
      grid-column: 2 / 3; */

      /* 等同于 */
      /* grid-area: d; */

      /* 等同于 */
      grid-area: 3 / 2 / 5 /3;
    }

    .item5 {
      background: #E6CEAC;
    }

    .item6 {
      background: #ECAD9E;
    }

    .item {
      /* 
       justify-self属性设置单元格内容的水平位置（左中右）
       align-self属性设置单元格内容的垂直位置（上中下）
       place-self属性是align-self属性和justify-self属性的合并简写形式

       justify-self: start | end | center | stretch;
       align-self: start | end | center | stretch;
       place-self: <align-self> <justify-self>;
       */

       display: flex;
       align-items: center;
       justify-content: center;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>
</body>

</html>